<template>
  <div id="app">
    <router-view/>

    <el-dialog
      class="donatedDialog"
      :show-close="false"
      :visible.sync="isShowCodeDialog"
      width="30%">
      <img class="dialog_bg" src="./assets/img/index/dialog_bg.png" alt="" ondragstart="return false">

      <div class="dialog_box">
        <div class="dialog_header">
          <span>扫码关注山西师范大学教育发展基金会</span>
          <span>官方微信公众平台</span>
          <span>{{ isRegister ? '进行注册' : '进行捐赠' }}</span>
        </div>

        <div class="dialog_body">
          <div class="dialog_code_box">
            <img src="./assets/img/index/er.png" alt="">
          </div>

          <span>微信扫一扫</span>
        </div>

        <div class="dialog_footer" @click="isShowCodeDialog = false">
          <span>关闭</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',

  data() {
    return {
      isShowCodeDialog: false, // 是否显示捐款模态框
      isRegister: false // 是否为注册
    }
  },

  mounted() {
    let _this = this

    // 事件注册 是否显示二维码模态框
    this.$eventBus.$on('isShowCodeDialog', (boolean_1, boolean_2) => {
      _this.isShowCodeDialog = boolean_1
      _this.isRegister = boolean_2
    })
  },

  destroyed() {
    // 事件注销
    this.$eventBus.$off('isShowCodeDialog')
  }
}
</script>

<style>
.el-breadcrumb {
  font-size: 18px;
}
</style>

<style>
  #app .donatedDialog .el-dialog {
    width: 450px;
    height: 560px;
    border-radius: 10px;
  }

  #app>.donatedDialog>.el-dialog .el-dialog__header, #app>.donatedDialog>.el-dialog .el-dialog__body {
    padding: 0;
  }

  #app .donatedDialog .el-dialog .el-dialog__body {
    width: 100%;
    height: 100%;
    position: relative;
  }

  #app .donatedDialog .dialog_bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
  }

  #app .donatedDialog .dialog_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #app .donatedDialog .dialog_box .dialog_header {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 26px;
    line-height: 45px;
    font-weight: bold;
    color: #7A1C1C;
  }

  #app .donatedDialog .dialog_box .dialog_body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    color: #343434;
  }

  #app .donatedDialog .dialog_box .dialog_body .dialog_code_box {
    width: 174px;
    height: 174px;
    border: solid 1PX #D4D4D4;
    margin-top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #app .donatedDialog .dialog_box .dialog_body .dialog_code_box img {
    width: 160px;
    height: 160px;
    background: #E1E1E1;
  }

  #app .donatedDialog .dialog_box .dialog_footer {
    width: 135px;
    height: 55px;
    border-radius: 10px;
    background: #7A1C1C;
    margin-top: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #ffffff;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
  }
</style>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  min-width: 600PX;
}
*{
	padding:0;
	margin: 0;
	list-style: none;
	text-decoration: none;
}
.flex{
  display: flex;
  justify-content: space-around;
  align-items: center;
  display: box;              /* OLD - Android 4.4- */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.hs{
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
}
.hb{

  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}
.hc{
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
}
.ha{
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  -ms-justify-content: space-around;
  -o-justify-content: space-around;
  justify-content: space-around;
}
.he {
  -moz-box-pack: end;
  -webkit-box-pack: flex-end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.vc{
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}
.vs{
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -o-align-items: flex-start;
  align-items: flex-start;
}
.ve{
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  -ms-align-items: flex-end;
  -o-align-items: flex-end;
  align-items: flex-end;
}
.flex .shrink0{
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
/*  纵向排列  */
.flex.column{
  /* 09版 */
  -webkit-box-orient: vertical;
  /* 12版 */
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
}
.wrap{
  -webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
}
.nowrap{
  -webkit-flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
-o-flex-wrap: nowrap;
flex-wrap:nowrap;
}
.scroller{
  padding:0 12px;
  box-sizing: border-box;
}

.ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

_:-ms-fullscreen, :root .ellipsis2 {
  width: 100%;
}

</style>
